<template>
	<div class="bodyi1">
		<div class="all1">
			<div class="lefter1" @click="Jianguo_Login">
				<div class="text1">坚果云网盘</div>
			</div>
			<div class="left1" @click="Weiyun_Login">
				<div class="text1">微云</div>
			</div>
			<div class="center1" @click="Baidu_Login">
				<div class="explainer1">
					<img src="../assets/logo.png" width="100%" height="100%" style="margin-right: 10px;" />
				</div>
				<div class="text1">百度云网盘</div>
			</div>
			<div class="right1" @click="ChengTong">
				<div class="text1">诚通网盘</div>
			</div>
			<div class="righter1" @click="Xiaomai_Login">
				<div class="text1">小麦网盘</div>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		methods: {
			Baidu_Login() {
				this.$router.push('/Baidu_Login')
			},
			Weiyun_Login() {
				this.$router.push('/Weiyun_Login')
			},
			ChengTong() {
				this.$router.push('/ChengTong_Login')
			},
			Jianguo_Login() {
				this.$router.push('/Jianguo_Login')
			},
			Xiaomai_Login(){
				this.$router.push('/Xiaomai_Login')
			}
		}
	}
</script>
<style>
	.bodyi1 {
		font-family: 'Raleway', sans-serif;
		background-image: radial-gradient(circle at center, #58c43a, #847d58);
		/* 无变化 */
		background-size: cover;
		background-repeat: no-repeat;
		height: 100vh;
		overflow: hidden;
		display: flex;
		justify-content: center;
		align-items: center;
		background: radial-gradient(ellipse at bottom, #d0d0d0, #515a6e);
		/* 大背景颜色 */
		font-weight: 300;
	}

	.all1 {

		display: flex;
		-webkit-perspective: 10px;
		perspective: 10px;
		-webkit-transform: perspective(300px) rotateX(20deg);
		transform: perspective(300px) rotateX(20deg);
		will-change: perspective;
		-webkit-perspective-origin: center center;
		perspective-origin: center center;
		transition: all 1.3s ease-out;
		justify-content: center;
		-webkit-transform-style: preserve-3d;
		transform-style: preserve-3d;
	}

	.all1:hover {
		-webkit-perspective: 1000px;
		perspective: 1000px;
		transition: all 1.3s ease-in;
		-webkit-transform: perspective(10000px) rotateX(0deg);
		transform: perspective(10000px) rotateX(0deg);
	}

	.all1:hover .text {
		opacity: 1;
	}

	.all1:hover>div {
		opacity: 1;
		transition-delay: 0s;
	}

	.all1:hover .explainer {
		opacity: 0;
	}

	.left1,
	.center1,
	.right1,
	.lefter1,
	.righter1 {
		width: 200px;
		height: 150px;
		-webkit-transform-style: preserve-3d;
		transform-style: preserve-3d;
		border-radius: 10px;
		border: 1px solid #fff;
		box-shadow: 0 0 20px 5px rgba(85, 170, 255, 0.9);
		/* 方框阴影颜色 */
		opacity: 0;
		transition: all .3s ease;
		transition-delay: 1s;
		position: relative;
		background-position: center center;
		background-size: contain;
		background-repeat: no-repeat;
		background-color: #cacaca;
		/* 未经过其他方框背景色 */
		cursor: pointer;
		background-blend-mode: color-burn;
	}

	.left1:hover,
	.center1:hover,
	.right1:hover,
	.lefter1:hover,
	.righter1:hover {
		box-shadow: 0 0 30px 10px rgba(73, 143, 255, 0.6);
		/* 鼠标经过方框阴影颜色 */
		background-color: #ececec;
		/* 鼠标经过某方框背景颜色 */
	}

	.text1 {
		-webkit-transform: translateY(30px);
		transform: translateY(30px);
		opacity: 0;
		transition: all .3s ease;
		bottom: 0;
		left: 5px;
		position: absolute;
		will-change: transform;
		color: #fff;
		text-shadow: 0 0 5px rgba(85, 170, 127, 0.6);
		/* 无变化 */
	}

	.lefter1 {
		-webkit-transform: translateX(-60px) translateZ(-50px) rotateY(-10deg);
		transform: translateX(-60px) translateZ(-50px) rotateY(-10deg);
		background-image: url(../assets/img/jianguoyun.jpg);
	}

	.left1 {
		-webkit-transform: translateX(-30px) translateZ(-25px) rotateY(-5deg);
		transform: translateX(-30px) translateZ(-25px) rotateY(-5deg);
		background-image: url(../assets/img/weiyun.jpg);
	}

	.center1 {
		opacity: 1;
		background-image: url(../assets/img/Baidu.jpg);
	}

	.right1 {
		-webkit-transform: translateX(30px) translateZ(-25px) rotateY(5deg);
		transform: translateX(30px) translateZ(-25px) rotateY(5deg);
		background-image: url(../assets/img/chengtong.jpg);
	}

	.righter1 {
		-webkit-transform: translateX(60px) translateZ(-50px) rotateY(10deg);
		transform: translateX(60px) translateZ(-50px) rotateY(10deg);
		background-image: url(../assets/img/xiaomai.jpg);
	}

	.explainer1 {
		font-weight: 300;
		font-size: 2rem;
		color: #fff;
		transition: all .6s ease;
		width: 100%;
		height: 100%;
		background-color: #303050;
		background-image: radial-gradient(circle at center top, #c2c2c2, #808ead);
		/* 方框背景颜色 */
		border-radius: 10px;
		text-shadow: 0 0 10px rgba(255, 206, 255, 0.8);
		/* 字体阴影 */
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
